<template>
    <Scroll ref="listview" :date="data" >
      <div class="content">
        <ul>
          <li class="content_item" v-for="item in data" ref="listGroup">
            <h2>{{item.title}}</h2>
            <ul>
              <li v-for="i in item.items">
                <img :src="i.image">
                <span>{{i.name}}</span>
              </li>
            </ul>
          </li>
        </ul>

      </div>

      <div class="list-shortcut" @touchstart="onShortcutTouchStart" @touchmove.stop.prevent="onShortcutTouchMove">
        <ul>
          <li v-for="(item,index) in shortcutList" :data-index="index">{{item}}</li>
        </ul>
      </div>



    </Scroll>
</template>

<script type="es6">
  import Scroll from 'base/scroll/scroll'
  import {getData} from 'common/js/dom'

  const LI_HEIGHT=20;

  export default {
    created(){
     this.touch={}

    },
    //data(){},//data 中的数据会被 实时监听的
    props: {
      data: {
        type: Array,
        default: null
      }
    },
    components: {
      Scroll
    },
    computed:{
      shortcutList(){
        return this.data.map((item)=>{
          return item.title;
        })
      }
    },
    methods:{
      onShortcutTouchStart(e){
        console.log(e.target);
        let anchorIndex = getData(e.target, 'data-index');
        this.touch.startY=e.touches[0].pageY;//获取第一个点y位置
        this.touch.StartIndex=anchorIndex;
        console.log('index====' + anchorIndex);
        this.$refs.listview.scrollToElement(this.$refs.listGroup[anchorIndex],0)
      },
      onShortcutTouchMove(e){

        this.touch.moveY=e.touches[0].pageY;
        this.touch.index=parseInt(this.touch.StartIndex) + parseInt((this.touch.moveY-this.touch.startY)/20);
        //console.log("move==="+this.touch.index);
        this.$refs.listview.scrollToElement(this.$refs.listGroup[this.touch.index],0);

      }

    },
    watch: {
      data(){//当data 变化 重新刷新
        setTimeout(()=> {
          console.log("listView data 变化");
          this.$refs.listview.refresh();
          //this.refresh()
          //Scroll.refresh();
        }, 20)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "listview.styl";

</style>
